<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="application/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
<script type="application/javascript">
	/*
		#step_01
		- 1단메뉴 레이아웃.
		
		#step_02
		- 2단메뉴 레이아웃.
		
		#step_03
		- 1단메뉴 마우스 동작
		
		#step_04
		- 하이라이터 적용( 빨간거 .. )
		
		#step_05
		- 1단메뉴 상태관리
		
		#step_06
		- 2단메뉴 움직이기
		
		#step_07
		- 2단메뉴 마스크 처리
		
		#step_08
		- 서브 마우스 동작
		
		#step_09
		- 서브 상태관리 - 1
		
		#step_10
		- 서브 상태관리 - 2
	*/
	
	$( document ).ready(function(e) {
		
		const menuTweenSpeed = 150;
		const subTweenSpeed = 300;
		const highTweenSpeed = 250;
			
		var $currentItem = null;
		var $currentSubItem = null;
		var $items_depth1 = $( "#menu .depth_1 .depth_1_list li" );
		var $items_depth2 = $( "#menu .depth_2_mask .depth_2 .depth_2_list li" );
		var $depth_2 = $( "#menu .depth_2" );
		var $depth_2_list = $( "#menu .depth_2_mask .depth_2 .depth_2_list" );
		var $depth_2_mask = $( "#menu .depth_2_mask" );
		var $highlighter = $( "#menu .depth_1 .highlighter" );
		var currentSubIndex = 0;
		var selectStateIntervalId;
		
		function activeItem( $item ){
			$item.stop();
			$highlighter.stop();
			$item.animate( {  top:-20 }, menuTweenSpeed );
			$highlighter.animate( { left: $item.position().left, width: $item.outerWidth() }, highTweenSpeed );
			
			activeSub( $item );
		}
		
		function deactiveItem( $item ){
			var tx = $highlighter.position().left + $highlighter.width()/2;
			$item.stop();
			$highlighter.stop();
			$item.animate( {  top:0 }, menuTweenSpeed );
			$highlighter.animate( { width:0, left:tx }, highTweenSpeed );
			
			deactiveSub();
		}
		
		function activeSubItem( $item ){
			$item.css( "color", "#FF0000" );
		}
		
		function deactiveSubItem( $item ){
			$item.css( "color", "#555555" );
		}
		
		function activeSub( $item ){
			currentSubIndex = $items_depth1.index( $item );
			var $list = $( $depth_2_list.get( currentSubIndex ));
			var itemLeft = $item.position().left;
			var listLeft = $list.position().left;
			$depth_2.stop();
			$depth_2_mask.stop();
			$depth_2.animate( { left:-listLeft }, subTweenSpeed );
			$depth_2_mask.animate( { left:itemLeft, width:$list.outerWidth() }, subTweenSpeed );
		}
		
		function deactiveSub( ){
			var width = $depth_2_mask.width();
			var left =  $depth_2_mask.position().left
			$depth_2_mask.stop();
			$depth_2_mask.animate( { width:0, left:left + width/2 }, subTweenSpeed );
		}
		
		function setSelectedItem(){
			clearInterval( selectStateIntervalId );
			selectStateIntervalId = setInterval( function(){
				if( $currentItem ){
					activeItem( $currentItem );
				}else{
					deactiveItem( $($items_depth1.get( currentSubIndex )) );
				}
				if( $currentSubItem ){
					activeSubItem( $currentSubItem );
				}
				clearInterval( selectStateIntervalId );		
			}, 300 );
		}
		
		
		
		
		//::::::::::::::event handler::::::::::::::
		
		$items_depth1.mouseenter( function(){
			clearInterval( selectStateIntervalId );		
			var $item = $( this );
			if( $currentItem &&  $currentItem != $item){
				deactiveItem( $currentItem );	
			}
			activeItem( $item );
		});
		
		$items_depth1.mouseleave( function(){
			var $item = $( this );
			if( $currentItem != $item ){
				setSelectedItem();
			}
		});
		
		$items_depth1.click( function( event ){
			$currentItem = $( this );
			if( $currentSubItem ){
				deactiveSubItem( $currentSubItem );	
			}
			$currentSubItem = null;
		});
		
		$items_depth2.mouseenter( function(){
			clearInterval( selectStateIntervalId );
			var $item = $( this );
			if( $currentSubItem &&  $currentSubItem != $item){
				deactiveSubItem( $currentSubItem );	
			}
			activeItem( $($items_depth1.get( currentSubIndex )) );
			activeSubItem( $item );
		});
		
		$items_depth2.mouseleave( function(){
			var $item = $( this );
			if( $currentSubItem != $item ){
				if( $currentSubItem ){
					setSelectedItem();
				}
				deactiveSubItem( $item );	
			}
		});
		
		$items_depth2.click( function( event ){
			$currentItem = $($items_depth1.get( currentSubIndex ));
			$currentSubItem = $( this );
		});
		
		
		$depth_2_mask.mouseenter( function(){
			clearInterval( selectStateIntervalId );
			activeItem( $($items_depth1.get( currentSubIndex )) );
		});
		
		$depth_2_mask.mouseleave( function(){
			setSelectedItem();
		});
    });
	
</script>

<style>
	*{
		margin:0px;
		padding:0px;
	}
	
	#menu{
		position:absolute;
		left:50px;
		top:50px;
		font-family:Tahoma, Geneva, sans-serif;
	}
	
	#menu .depth_1{
		width:480px;
		height:40px;
		background-color:#666666;
	}
	
	#menu .depth_1 .highlighter{
		left:0px;
		height:40px;
		width:0px;
		position:absolute;
		background-color:#EE0000;
	}
	
	#menu .depth_1 .depth_1_list{
		position:absolute;
		top:10px;
		list-style:none;
		color:#FFFFFF;
		height:20px;
		padding-left:20px;
		padding-right:20px;
		overflow:hidden;
	}
	
	#menu .depth_1 .depth_1_list li{
		height:40px;
		float:left;
		padding-left:20px;
		padding-right:20px;
		position: relative;
	}
	
	#menu .depth_2_mask{
		position:absolute;
		height:20px;
		overflow:hidden;
	}
	
	#menu .depth_2_mask .depth_2{
		position:absolute;
		overflow:hidden;
		width:1000px;
		height:20px;
	}
	
	#menu .depth_2_mask .depth_2 .depth_2_list{
		font-size:11px;
		height:20px;
		list-style:none;
		background-color:#CCCCCC;
		color:#555555;
		float:left;
		padding-left:10px;
		padding-right:10px;
	}
	
	#menu .depth_2_mask .depth_2 .depth_2_list li{
		height:19px;
		float:left;
		padding-top:4px;
		padding-left:10px;
		padding-right:10px;
	}
	
	
</style>

<body>
	<div id="menu">
    	<div class="depth_1">
    		<div class="highlighter"></div>
        	<ul class="depth_1_list">
        		<li>Hello~<br>Hello~</li>
                <li>World!!<br>World!!</li>
                <li>Web<br>Web</li>
                <li>App<br>App</li>
                <li>Samo..?!<br>Samo..?!</li>
        	</ul>
        </div>
        <div class="depth_2_mask">
        	<div class="depth_2">
        		<ul class="depth_2_list">
	        		<li>hello-1</li>
	        		<li>hello-2</li>
	        		<li>hello-3</li>
	        	</ul>	
	        	<ul class="depth_2_list">
	        		<li>world-1</li>
	        		<li>world-2</li>
	        	</ul>
	        	<ul class="depth_2_list">
	        		<li>web-1</li>
	        		<li>web-2</li>
	        		<li>web-3</li>
	        		<li>web-4</li>
	        		<li>web-5</li>
	        	</ul>
	        	<ul class="depth_2_list">
	        		<li>app-1</li>
	        		<li>app-2</li>
	        		<li>app-3</li>
	        		<li>app-4</li>
	        	</ul>
	        	<ul class="depth_2_list">
	        		<li>samo-1</li>
	        		<li>samo-2</li>
	        		<li>samo-3</li>
	        	</ul>	
        	</div>
        </div>
    </div>
</body>
</html>
